<template>
  <div class="aside-card" @click="handleClick">
    <div class="card-header">
      <div class="card-icon">
        <!--TODO增加图标样式 -->
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="icon"></use>
        </svg>
      </div>
      <div class="title-content-wrapper">
        <h3 class="card-title">{{ title }}:</h3>
        <p class="card-content" v-if="text">{{ text }}</p>
      </div>  
    </div>

    <div class="slot">
      <!--TODO 插槽到时候放置一些小组件 -->
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
// 定义组件props
import { useArticleStore } from '../../stores/article';
import { useRouter } from 'vue-router';
const router = useRouter();
const articleStore = useArticleStore();
const props = defineProps({
  img: {
    type: String,
    default: "",
  },
  views: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "为什么每天不能睡25个小时啊。",
  },
  icon: {
    type: String,
    default: "default",
  },
  text: {
    type: String,
    default: "",
  },
  canClick: {
    type: Boolean,
    default: false,
  },
  route: {
    type: Object,
    default: () => {},
  }
})
// 定义点击事件处理函数
const handleClick = () => {
  if (props.canClick) {
    articleStore.img = props.img
    articleStore.title = props.title
    articleStore.subTitle = props.views + '次阅读';
    router.push(props.route);
  }
};


</script>

<style scoped lang="scss">
.aside-card {
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;

    .title-content-wrapper {
      flex: 1;
      margin-left: 0.5rem;
    }

    .card-title {
      margin: 0 0 8px 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
    }
  }

  .card-content {
    margin: 0;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
